<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>瞬忆</title>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
    *{
        padding: 0;
        margin: 0;
        user-select: none;
    }
	html,body{
		width: 100%;
		height: 100%;
	}
    #gamebox{
        border-radius: 12px;
        width: 300px;
        height: 300px;
        border: .5px solid #eee;
        background-color: whitesmoke;
        display: none;
    }
    .btn{
        font-size: 2em;
        display: inline-block;
        text-align: center;
        background-color: white;
        border: 1px solid #eee;
        border-radius: 8px;
        margin: 10px;
		transition: .2;
    }
    </style>
</head>
<body> 
    <div id="gamebox"></div>

    <script>
    /*
    *   box Array 随机排序后数组
    *   nums Array 正常数字序列
    */
    var box = [];
    var nums = [];
    
    
    function gamestart(deg){
    
        // 1,2,3,4,5... 等插入nums数组
        for (var i = 0; i < deg; i++) {
            nums[i] = i+1;    
        }
        
        //  数组随机排序
        function random_sort(array){
            var res = [], random;
            while(array.length>0){
                random = Math.floor(Math.random()*array.length);
                res.push(array[random]);
                array.splice(random, 1);
            }
            return res;
        }

        //  输出随机排序结果
        console.log("随机排序结果", box = random_sort(nums));
		var s=0,e=Math.sqrt(deg);
		var gua = [],g = box;
		for(var cao= 0;cao < Math.sqrt(deg); cao++){
			gua[cao] = g.slice(s,e);
			s+=Math.sqrt(deg),e+=Math.sqrt(deg);
		}
		console.log(gua);
        //  -- 开始绘制UI --

        //  实现居中
        var gamebox = document.getElementById("gamebox");
        gamebox.style.marginLeft = (innerWidth-300)/ 2 + "px";
        gamebox.style.marginTop = (innerHeight-300)/ 2 + "px";
        gamebox.style.display = "block";

        //  每一个数字格的边长 每一个“1” “21” 都经过严密计算 勿动 {{毁页面！}}
        const SIDELEN = (300 - (Math.sqrt(deg) +1))/ Math.sqrt(deg) - 21 + "px";
        
        //  每局开始前清理上局残局 后进行绘制新局
        gamebox.innerHTML = "";
        for (var c = 0; c < box.length; c++) {
            gamebox.innerHTML += "<div class='btn'>" + box[c] + "</div>";
        }

        //  对每一格的css进一步处理
        var btns = document.getElementsByClassName("btn");
        for (var b = 0; b < btns.length; b++) {
            btns[b].style.width = SIDELEN;
            btns[b].style.height = SIDELEN;
            btns[b].style.lineHeight = SIDELEN;
        }

        //  -- UI绘制 end --

        //  -- 游戏逻辑 --
        //  使用setTimeout函数 观察时间为边长*2的秒数 时间到后对数字颜色进行改变实现隐藏
        setTimeout(function(){
            // 记录用户正在点击第几个
            var n= 1;
            // 记录用户已经点击过的元素索引值
            var history = [];
            
			/*  对使用class获取dom的元素进行 'click' 绑定
            *   需在外层用 for循环遍历所有相关 class节点后进行onclick事件处理
            */
            for (var i = 0; i < btns.length; i++) {
				(function(i) {
					btns[i].style.color = "rgb(142,192,231)";
					btns[i].style.backgroundColor = "rgb(142, 192, 231)";

					btns[i].addEventListener("click", function() {
					for (var j = 0; j < history.length; j++) {
						if (i == history[j]) {
						console.log("请勿重复点击已显元素！");
						return false;
						}
					}

					console.log(i);
					btns[i].style.color = "black";
					btns[i].style.backgroundColor = "white";

					if (btns[i].innerHTML == n) {
						history.push(i);

						if (n >= deg) {
						n = 0;
						deg = (Math.sqrt(deg) + 1) * (Math.sqrt(deg) + 1);
						gamestart(deg);
						}

						n++;
					} else {
						alert("GAMEOVER！");
						gamestart(4);
					}
					});
				})(i);
			}
        },Math.sqrt(deg)*2*1000);

        //  -- 游戏逻辑 end --
    }
    gamestart(4);
  </script>
</body>
</html>